import { WaterMark } from '@ant-design/pro-components'
import { ProLayout } from '@ant-design/pro-components'
import { useState, useRef } from 'react'
import * as maplibregl from 'maplibre-gl'
import Map from './components/Map'
import MapHeader from './components/Header'
import LayerTree from './components/LayerTree'
import Chat from './components/Chat'
import { Avatar, Typography } from 'antd'
import { RobotOutlined, GithubOutlined } from '@ant-design/icons'
import './App.css'

function App() {
  const [collapsed, setCollapsed] = useState(false)
  const mapRef = useRef<maplibregl.Map | null>(null)
  const [zoom, setZoom] = useState(0)
  const [mousePosition, setMousePosition] = useState<{ lng: number; lat: number } | null>(null)

  const handleZoomIn = () => {
    if (mapRef.current) {
      mapRef.current.zoomIn()
    }
  }

  const handleZoomOut = () => {
    if (mapRef.current) {
      mapRef.current.zoomOut()
    }
  }

  const handleResetNorth = () => {
    if (mapRef.current) {
      mapRef.current.resetNorth()
    }
  }

  const handleMapLoad = (map: maplibregl.Map) => {
    // 监听缩放事件
    map.on('zoom', () => {
      setZoom(Math.round(map.getZoom() * 100) / 100)
    })

    // 监听鼠标移动事件
    map.on('mousemove', (e) => {
      setMousePosition({
        lng: Math.round(e.lngLat.lng * 100000) / 100000,
        lat: Math.round(e.lngLat.lat * 100000) / 100000
      })
    })
  }

  return (
    <WaterMark content="AI Map">
      <div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
        {/* 顶部菜单栏 */}
        <div style={{ height: '48px', borderBottom: '1px solid #f0f0f0', display: 'flex', alignItems: 'center', padding: '0 16px' }}>
          <Avatar icon={<RobotOutlined />} style={{ backgroundColor: '#1677ff' }} />
          <Typography.Title level={5} style={{ margin: '0 8px' }}>AI Map</Typography.Title>
          <div style={{ flex: 1 }} />
          <MapHeader
            onZoomIn={handleZoomIn}
            onZoomOut={handleZoomOut}
            onResetNorth={handleResetNorth}
          />
        </div>
        
        {/* 下方内容区域 */}
        <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
          {/* 左侧图层管理器 */}
          <div style={{ width: '300px', borderRight: '1px solid #f0f0f0', overflow: 'hidden' }}>
            <LayerTree mapRef={mapRef} />
          </div>
          
          {/* 中间地图区域 */}
          <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
            <Map mapRef={mapRef} onMapLoad={handleMapLoad} />
          </div>
          
          {/* 右侧聊天栏 */}
          <div style={{ width: '300px', borderLeft: '1px solid #f0f0f0', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
            <Chat />
          </div>
        </div>

        {/* 底部状态栏 */}
        <div style={{ height: '24px', borderTop: '1px solid #f0f0f0', display: 'flex', alignItems: 'center', padding: '0 16px', fontSize: '12px', color: '#666' }}>
          <div style={{ flex: 1 }} />
          <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
            <span>缩放级别: {zoom}</span>
            {mousePosition && (
              <span>经度: {mousePosition.lng}° 纬度: {mousePosition.lat}°</span>
            )}
            <span style={{ marginLeft: '16px' }}>AI Map v0.0.1</span>
            <a href="https://github.com/yourusername/aimap" target="_blank" rel="noopener noreferrer" style={{ color: '#666', display: 'flex', alignItems: 'center', gap: '4px' }}>
              <GithubOutlined />
              <span>GitHub</span>
            </a>
          </div>
        </div>
      </div>
    </WaterMark>
  )
}

export default App
